<template>
	<view class="page">
		<view class="top">
			<view class="title-wrap">
				<view>
					减肥可以很快乐
				</view>
				<view>
					按时吃饭就完了
				</view>
			</view>
		</view>
		<view class="main">
			<view class="list">
				<view class="item" v-for="item in foodList" :key="item.id">
					<image class="cover-img" :src="item.dishImg" mode=""></image>
					<view class="right">
						<view class="title">
							{{item.dishName}}
						</view>
						<view class="title">
							{{item.dishIntroduction}}
						</view>
						<view class="price-box">
							<view class="">
								<view class="price" v-for="(sub,index) in item.specifications" :key="item.id">
									{{sub.availablePersons}}份及以上单价：￥{{sub.sellPrice}}
								</view>
							</view>
							<tn-number-box v-model="item.bookNum"></tn-number-box>
						</view>
					</view>
				</view>
			</view>

		</view>


		<view class="action">
			<view class="btn" @click="handleSubmit">
				提交餐品
			</view>
		</view>


	</view>
</template>

<script setup>
	import {
		filterDate
	} from "@/filters";
	import {
		getFoodList
	} from '@/api/dish'
	import {
		ref,
		computed,
		onMounted,
		watch
	} from "vue";
	import {
		useAppStore
	} from '@/store';


	const appStore = useAppStore();
	const showLoginPopup = computed(() => appStore.showLoginPopup);
	const foodList = ref([]);
	const emit = defineEmits(['changeTab']);

	const getList = async () => {
		const res = await getFoodList();
		if (res.data) {
			foodList.value = res.data;
		}
	}



	const handleSubmit = () => {
		const token = uni.getStorageSync('token');
		if(!token){
			appStore.OPEN_LOGIN_POPUP(); // 打开登录弹框
			return;
		}
		// const currentTimeStamp = new Date().getTime();
		// const targetTimeStamp = new Date(`${filterDate(new Date(),'YYYY/MM/DD')} 18:00:00`).getTime();
		// const noChoose = targetTimeStamp - currentTimeStamp < 0; // 时间差小于0 就不能点餐了

		// if (noChoose) {
		// 	uni.showToast({
		// 		icon: 'none',
		// 		title: '预定已进入统计期，请明天再试'
		// 	})
		// 	return;
		// }

		const isFood = foodList.value.some(item => item.bookNum > 0);
		if (!isFood) {
			uni.showToast({
				icon: 'none',
				title: '请点餐'
			})
			return;
		}
		emit("changeTab", 'order');
		uni.setStorageSync('foodList', foodList.value.filter(item => item.bookNum > 0));
	}

	watch(showLoginPopup, (val) => {
		if (!val) {
			getList(); // 登录了就请求
		}
	})

	onMounted(() => {
		getList();
	})
</script>

<style lang="scss" scoped>
	.page {
		padding-bottom: 300rpx;

		.top {
			height: 400rpx;
			background-color: #84d0ac;
		}

		.title-wrap {
			padding: 0 24rpx;
			padding-top: 200rpx;
			color: #fff;
			font-weight: bold;
			font-size: 38rpx;
		}

		.main {
			border-radius: 30rpx 30rpx 0 0;
			background-color: #ffffff;
			margin-top: -30rpx;
			padding-top: 24rpx;

			.list {
				padding: 0 20rpx;

				.item {
					display: flex;
					justify-content: space-between;
					margin-bottom: 20rpx;
					border: 1px solid green;
					border-radius: 16rpx;
					padding: 10rpx;

					.cover-img {
						width: 200rpx;
						height: 200rpx;
						margin-right: 20rpx;
					}

					.right {
						flex: 1;

						.title {
							flex: 1;
							font-size: 24rpx;
							color: #323232;
						}

						.price-box {
							margin-top: 20rpx;
							display: flex;
							justify-content: space-between;
							align-items: center;

							.price {
								color: red;
								font-size: 24rpx;
							}
						}
					}

				}
			}


		}
	}

	.action {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 88rpx;

		.btn {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 50%;
			height: 80rpx;
			color: #ffffff;
			font-size: 30rpx;
			font-weight: bold;
			background-color: #ffa200;
			border-radius: 40rpx;
		}
	}
</style>